<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="6">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves icon="el-icon-plus" @click="addShouldPaymentTypeClick">添加
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves icon="el-icon-delete" @click="deleteShouldPaymentTypeClick">删除
          </el-button>
        </el-col>
        <el-col :span="18" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item fsc-search" placeholder="应付单类型名称" v-model="listQuery.condition.name" @keyup.enter.native="searchClick"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="searchClick">
            搜索
          </el-button>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline" @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="code">编码</el-checkbox>
                  <el-checkbox label="name">姓名</el-checkbox>
                  <el-checkbox label="businessType">默认类型</el-checkbox>
                  <el-checkbox label="encodeType">编码方式</el-checkbox>
                  <el-checkbox label="encodeRule">编码规则</el-checkbox>
                  <el-checkbox label="isSealed">封存</el-checkbox>
                  <el-checkbox label="gmtCreate">创建日期</el-checkbox>
                  <el-checkbox label="createUser">创建组织</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
    <div :class="{'search-transition':searchFlag,h0:true,h110:searchFlag,'search-content':true}">
      <el-row>
        <el-col :xl="5" :lg="7">
          <div class="el-form-item postInfo-container-item el-form-item--medium">
            <label class="el-form-item__label" style="width: 80px;">编码:</label>
            <div class="el-form-item__content" style="margin-left: 80px;">
              <div class="el-input el-input--medium">
                <el-input placeholder="编码" v-model="listQuery.condition.code"></el-input>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xl="5" :lg="7">
          <div class="el-form-item postInfo-container-item el-form-item--medium">
            <label class="el-form-item__label" style="width: 80px;">业务类型:</label>
            <div class="el-form-item__content" style="margin-left: 80px;">
              <div class="el-input el-input--medium">
                <el-select v-model="listQuery.condition.businessType" placeholder="请选择业务类型">
                  <el-option label="发票" value="10"></el-option>
                  <el-option label="借项通知单" value="20"></el-option>
                  <el-option label="贷项通知单" value="30"></el-option>
                  <el-option label="借项账户单" value="40"></el-option>
                  <el-option label="申请" value="50"></el-option>
                  <el-option label="贷项账户单" value="60"></el-option>
                  <el-option label="预付款" value="70"></el-option>
                  <el-option label="标准款" value="80"></el-option>
                  <el-option label="其他款" value="90"></el-option>
                  <el-option label="应付核销" value="100"></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xl="5" :lg="7">
          <div class="el-form-item postInfo-container-item el-form-item--medium">
            <label class="el-form-item__label" style="width: 80px;">确认方式:</label>
            <div class="el-form-item__content" style="margin-left: 80px;">
              <div class="el-input el-input--medium">
                <el-select v-model="listQuery.condition.confirmType" placeholder="请选择确认方式">
                  <el-option label="确认作业" value="10"></el-option>
                  <el-option label="审批作业" value="20"></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xl="5" :lg="7">
          <div class="el-form-item postInfo-container-item el-form-item--medium label-checkbox-content">
            <label role="checkbox" class="el-checkbox filter-item" style="margin-left: 15px;">
              <span aria-checked="mixed" class="el-checkbox__input">
                <el-checkbox v-model="listQuery.condition.isDefault" true-label="1" false-label="0"></el-checkbox>
              </span>
              <span class="el-checkbox__label">是否默认</span>
            </label>
          </div>
        </el-col>

        <el-col :xl="5" :lg="7">
          <div class="el-form-item postInfo-container-item el-form-item--medium label-checkbox-content">
            <label role="checkbox" class="el-checkbox filter-item" style="margin-left: 15px;">
              <span aria-checked="mixed" class="el-checkbox__input">
                <el-checkbox v-model="listQuery.condition.isSealed" true-label="1" false-label="0"></el-checkbox>
              </span>
              <span class="el-checkbox__label">是否封存</span>
            </label>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="clean:both"></div>

    <el-table ref="shouldPaymentTypeTable" :data="shouldPaymentTypeList" v-loading="listLoading" element-loading-text="加载中" border fit highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column :key="key" align="center" v-for='(value,key) in tableThead' :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'isSealed'">{{scope.row[value.key] | sealedFilter}}</div>
          <div v-else-if="value.key === 'businessType'">{{scope.row[value.key] | payBusinessTypeFilter}}</div>
          <div v-else-if="value.key === 'isDefault'">{{scope.row[value.key] | payIsDefaultFilter}}</div>
          <div v-else-if="value.key === 'encodeType'">{{scope.row[value.key] | payEncodeTypeFilter}}</div>
          <div v-else-if="value.key === 'encodeRule'">{{scope.row[value.key] | payEncodeRuleFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateShouldPaymentTypeClick(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current" :page-sizes="[10,20,30, 50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>
    <el-dialog :title="shouldPaymentType.id ? '编辑应付单类型':'新增应付单类型'" :visible.sync="dialogFormVisible" width="55%" @close="closeDialogForm">
      <el-container style="width: 95%">
        <el-main>
          <el-form :rules="shouldPaymentTypeRules" ref="shouldPaymentTypeForm" :inline="true" :model="shouldPaymentType" label-position="left" label-width="90px" class="demo-form-inline">

            <el-form-item label="编码" prop="code">
              <el-input v-model="shouldPaymentType.code" placeholder="请输入编码"></el-input>
            </el-form-item>
            <el-form-item label="确认方式" prop="confirmType">
              <el-select v-model="shouldPaymentType.confirmType" placeholder="请选择确认方式">
                <el-option label="确认作业" value="10"></el-option>
                <el-option label="审批作业" value="20"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审批方式" prop="approvalType">
              <el-select v-model="shouldPaymentType.approvalType" placeholder="请选择审批方式">
                <el-option label="OA" value="10"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="名称" prop="name">
              <el-input v-model="shouldPaymentType.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="编码方式" prop="encodeType">
              <el-select v-model="shouldPaymentType.encodeType" placeholder="请选择编码方式">
                <el-option label="自动编号" value="10"></el-option>
                <el-option label="手动编号" value="20"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="编码规则" prop="encodeRule">
              <el-select v-model="shouldPaymentType.encodeRule" placeholder="请选择编码规则">
                <el-option label="调价单" value="10"></el-option>
                <el-option label="应付单方案01" value="20"></el-option>
                <el-option label="应付单方案02" value="30"></el-option>
                <el-option label="应付核销单" value="40"></el-option>
                <el-option label="应付调整单编码" value="50"></el-option>
                <el-option label="应付付款请款单" value="60"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="业务类型" prop="businessType">
              <el-select v-model="shouldPaymentType.businessType" @change="businesTypeChange" placeholder="请选择业务类型">
                <el-option label="发票" value="10"></el-option>
                <el-option label="借项通知单" value="20"></el-option>
                <el-option label="贷项通知单" value="30"></el-option>
                <el-option label="借项账户单" value="40"></el-option>
                <el-option label="贷项账户单" value="50"></el-option>
                <el-option label="申请" value="60"></el-option>
                <el-option label="预付款" value="70"></el-option>
                <el-option label="标准款" value="80"></el-option>
                <el-option label="其他款" value="90"></el-option>
                <el-option label="应付核销" value="100"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=" " prop="isEditCode">
              <el-checkbox v-model="shouldPaymentType.isEditCode" true-label="1" false-label="0" :checked="shouldPaymentType.isEditCode == 1" :key="shouldPaymentType.id">单据编号是否可改
              </el-checkbox>
            </el-form-item>
            <el-form-item label=" " prop="isShare">
              <el-checkbox v-model="shouldPaymentType.isShare" true-label="1" false-label="0" :checked="shouldPaymentType.isShare == 1" :key="shouldPaymentType.id">启用财务共享
              </el-checkbox>
            </el-form-item>

            <el-form-item label="借项通知单" prop="debitNotice">
              <el-select v-model="shouldPaymentType.debitNotice" :disabled="shouldPaymentType.businessType!=='10'" placeholder="请选择借项通知单">
                <el-option :key="borrowNote.id" :label="borrowNote.name" :value="borrowNote.id" v-for="borrowNote in borrowNoteList"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=" " prop="isDefault">
              <el-checkbox v-model="shouldPaymentType.isDefault" true-label="1" false-label="0" :checked="shouldPaymentType.isDefault == 1" :key="shouldPaymentType.id">默认单据类型
              </el-checkbox>
            </el-form-item>
            <el-form-item label=" " prop="isSealed">
              <el-checkbox v-model="shouldPaymentType.isSealed" true-label="1" false-label="0" :checked="shouldPaymentType.isSealed == 1" :key="shouldPaymentType.id">封存
              </el-checkbox>
            </el-form-item>
            <el-form-item label="贷项通知单" prop="creditNotice">
              <el-select v-model="shouldPaymentType.creditNotice" :disabled="shouldPaymentType.businessType!=='10'" placeholder="请选贷项通知单">
                <el-option :key="creditNote.id" :label="creditNote.name" :value="creditNote.id" v-for="creditNote in creditNoteList"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="!shouldPaymentType.id" type="primary" @click="addShouldPaymentTypeSubmit">新增</el-button>
        <el-button v-else type="primary" @click="updateShouldPaymentTypeSubmit">更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  listShouldPaymentType,
  addShouldPaymentType,
  deleteShouldPaymentType,
  getShouldPaymentType,
  updateShouldPaymentType,
  getByBusinessType
} from '@/api/pay/shouldPaymentType'
import waves from '@/directive/waves' // 水波纹指令
const defautlTableThead = [
  { key: 'code', title: '编码' },
  { key: 'name', title: '姓名' },
  { key: 'businessType', title: '业务类型' },
  { key: 'isDefault', title: '默认类型' },
  { key: 'encodeType', title: '编码方式' },
  { key: 'encodeRule', title: '编码规则' },
  { key: 'isSealed', title: '封存' },
  { key: 'gmtCreate', title: '创建日期' },
  { key: 'createUser', title: '创建组织' }
]
export default {
  name: 'shouldPaymentType',
  directives: {
    waves
  },
  data() {
    return {
      theadCheckVal: [
        'code',
        'name',
        'businessType',
        'isDefault',
        'encodeType',
        'encodeRule',
        'isSealed',
        'gmtCreate',
        'createUser'
      ],
      tableThead: defautlTableThead,
      search: {},
      listQuery: {
        current: 1,
        size: 10,
        total: 0,
        condition: {}
      },
      shouldPaymentTypeList: [],
      listLoading: true,
      searchFlag: true,
      dialogFormVisible: false,
      shouldPaymentType: {
        debitNotice: undefined,
        creditNotice: undefined
      },
      shouldPaymentTypeRules: {
        code: [{ required: true, message: '编码不能为空' }],
        name: [{ required: true, message: '名称不能为空' }],
        sex: [{ required: true, message: '姓别不能为空' }],
        idType: [{ required: true, message: '证件类型不能为空' }],
        idNumber: [{ required: true, message: '证件号码不能为空' }],
        mobile: [{ required: true, message: '手机号不能为空' }],
        departmentId: [{ required: true, message: '部门不能为空' }]
      },
      departmentList: [],
      queryDepartmentList: [],
      noticeDisabled: false,
      borrowNoteList: [],  // 借项通知单
      creditNoteList: []  // 贷项通知单
    }
  },
  created() {
    this.list()
  },
  watch: {
    theadCheckVal(valArr) {
      this.tableThead = defautlTableThead.filter(v => {
        for (var i = 0; i < valArr.length; i++) {
          if (v.key === valArr[i]) {
            return v
          }
        }
      })
    }
  },
  methods: {
    list() {
      // 列表查询
      this.$data.listLoading = true
      // 处理是否展开更多
      let queryParam = {}
      if (this.$data.searchFlag) {
        queryParam = this.$data.listQuery
      } else {
        Object.assign(queryParam, this.$data.listQuery)
        queryParam.condition = {
          name: this.$data.listQuery.condition.name
        }
      }
      listShouldPaymentType(queryParam).then(result => {
        if (result.code === 0) {
          this.$data.shouldPaymentTypeList = result.data.records
          this.$data.listQuery.total = result.data.total
        } else {
          this.$notify({
            title: '信息提示',
            message: result.message,
            type: 'error',
            duration: 2000
          })
        }
        this.$data.listLoading = false
      })
    },
    handleSizeChange(val) {
      // 分页size变化
      this.$data.listQuery.size = val
      this.list()
    },
    handleCurrentChange(val) {
      // 分页当前页变化
      this.$data.listQuery.current = val
      this.list()
    },
    addShouldPaymentTypeClick() {
      // 新增应付单类型
      this.$data.dialogFormVisible = true
      // 获取借项通知单 20 借项通知单
      getByBusinessType([20]).then(result => {
        this.$data.borrowNoteList = result.data
      })
      // 获取贷项通知单 30 贷项通知单
      getByBusinessType([30]).then(result => {
        this.$data.creditNoteList = result.data
      })
    },
    moreClick() {
      // 更多click
      this.$data.searchFlag = !this.$data.searchFlag
    },
    searchClick() {
      // 搜索
      this.list()
    },
    addShouldPaymentTypeSubmit() {
      // 新增提交应付单类型
      this.$refs['shouldPaymentTypeForm'].validate(valid => {
        if (valid) {
          addShouldPaymentType(this.$data.shouldPaymentType).then(result => {
            if (result.code === 0) {
              this.$data.dialogFormVisible = false
              this.list()
              this.$notify({
                title: '信息提示',
                message: '新增应付单类型成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '信息提示',
                message: result.message,
                type: 'error',
                duration: 2000
              })
            }
            // 清空数据
            this.$data.shouldPaymentType = {}
          })
        }
      })
    },
    deleteShouldPaymentTypeClick() {
      // 删除应付单类型 click
      if (this.$refs.shouldPaymentTypeTable.selection.length !== 0) {
        var ids = []
        for (var shouldPaymentType of this.$refs.shouldPaymentTypeTable
          .selection) {
          ids.push(shouldPaymentType.id)
        }
        deleteShouldPaymentType(ids).then(result => {
          if (result.code === 0) {
            this.list() // 刷新列表
            this.$notify({
              title: '信息提示',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          } else {
            this.$notify({
              title: '信息提示',
              message: '请选择要删除的数据',
              type: 'error',
              duration: 2000
            })
          }
        })
      } else {
        this.$notify({
          title: '信息提示',
          message: '请选择要删除的数据',
          type: 'error',
          duration: 2000
        })
      }
    },
    updateShouldPaymentTypeClick(id) {
      // 更新应付单类型 click
      getShouldPaymentType(id).then(result => {
        if (result.code === 0) {
          this.$data.dialogFormVisible = true
          this.$data.shouldPaymentType = result.data
        } else {
          this.$notify({
            title: '信息提示',
            message: result.message,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    updateShouldPaymentTypeSubmit() {
      // 更新应付单类型 submit
      this.$refs['shouldPaymentTypeForm'].validate(valid => {
        if (valid) {
          updateShouldPaymentType(this.$data.shouldPaymentType).then(result => {
            if (result.code === 0) {
              this.$data.dialogFormVisible = false
              this.list()
              this.$notify({
                title: '信息提示',
                message: '更新应付单类型成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '信息提示',
                message: result.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    closeDialogForm() {
      // 关闭dialogform
      this.$data.shouldPaymentType = {}
    },
    businesTypeChange(value) {
      // TODO 10 发票
      if (value === '10') {
        this.$data.noticeDisabled = false
      } else {
        this.$data.noticeDisabled = true
        this.$data.shouldPaymentType.debitNotice = undefined
        this.$data.shouldPaymentType.creditNotice = undefined
      }
    }
  }
}
</script>
<style scoped>

</style>
